<!DOCTYPE html>
<html lang="en">

    <!-- Basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <script src="/static/js/echarts.min.js"></script>
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
     <!-- Site Metas -->
    <title>猫眼Top100数据分析</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Site Icons -->
    <link rel="shortcut icon" href="/static/images/favicon.png" type="image/x-icon" />
    <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Site CSS -->
    <link rel="stylesheet" href="/static/style.css">
    <!-- ALL VERSION CSS -->
    <link rel="stylesheet" href="/static/css/versions.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/static/css/responsive.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/static/css/custom.css">
	
	<script src="/static/js/modernizr.custom.79639.js"></script>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond./static/js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body class="seo_version">

	<!-- LOADER -->
	<div id="preloader">
		<div class="loader-wrapper">
			<div class="loader-new">
				<div class="ball"></div>
				<div class="ball"></div>
				<div class="ball"></div>
			</div>
			<div class="text">LOADING...</div>
		</div>
	</div>
	<!-- END LOADER -->
	
	<!-- Start header -->
	<header class="top-navbar">
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container">
                <a class="navbar-brand" href="/index">
					<img src="/static/images/logo-seo.png" alt="" />
				</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars-seo" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
				  <span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbars-seo">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item"><a class="nav-link" href="/index">首页</a></li>
						<li class="nav-item"><a class="nav-link" href="/movie">电影</a></li>
						<li class="nav-item"><a class="nav-link" href="/score">评分</a></li>
						<li class="nav-item"><a class="nav-link" href="/word">词云</a></li>
						<li class="nav-item"><a class="nav-link" href="/team">关于</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</header>
	<!-- End header -->
    <div id="services" class="section lb">
        <div class="container-fluid">
			<div class="container">
				<div class="section-title text-center">
					<h3>猫眼Top100评分分布</h3>
				</div><!-- end title -->
			</div>
            <div class="parallax section lb">
    <div class="container">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: %100;height:400px;"></div>
        <script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },

    grid:{
      left:'10',
      bottom:'50',
      containLabel:true
    },
    xAxis: {
        type: 'category',
        {#data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']#}
        data: {{score|tojson}},
        axisLabel: {
            show: true,
            textStyle: {
                color: 'black',
                fontSize: 18
            }
        }

    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            textStyle: {
                color: 'black',
                fontSize: 18
            }
        },
    },
    series: [{
        {#data: [120, 200, 150, 80, 70, 110, 130],#}
        data: {{num}},


        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>


    </div><!-- end container -->
</div><!-- end section -->

        </div><!-- end container -->
    </div><!-- end section -->
    


    <div class="copyrights">
        <div class="container">
            <div class="footer-distributed">
                <div class="footer-left">
                    <p class="footer-company-name">Copyright &copy; 2020 邵兆明 |
                        <a target="_blank" href="https://space.bilibili.com/44784041">关于</a></p>
                </div>
            </div>
        </div><!-- end container -->
    </div><!-- end copyrights -->

    <a href="#" id="scroll-to-top" class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>

    <!-- ALL JS FILES -->
    <script src="/static/js/all.js"></script>
    <!-- ALL PLUGINS -->
	<script src="/static/js/tippy.all.min.js"></script>
    <script src="/static/js/custom.js"></script>
	
	<script src="/static/js/jquery.ba-cond.min.js"></script>
	<script src="/static/js/jquery.slitslider.js"></script>
	<script type="text/javascript">	
			$(function() {
			
				var Page = (function() {

					var $nav = $( '#nav-dots > span' ),
						slitslider = $( '#slider' ).slitslider( {
							onBeforeChange : function( slide, pos ) {

								$nav.removeClass( 'nav-dot-current' );
								$nav.eq( pos ).addClass( 'nav-dot-current' );

							}
						} ),

						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							$nav.each( function( i ) {
							
								$( this ).on( 'click', function( event ) {
									
									var $dot = $( this );
									
									if( !slitslider.isActive() ) {

										$nav.removeClass( 'nav-dot-current' );
										$dot.addClass( 'nav-dot-current' );
									
									}
									
									slitslider.jump( i + 1 );
									return false;
								
								} );
								
							} );

						};

						return { init : init };

				})();

				Page.init();
			
			});
		</script>
		
		<script>
			tippy('.btn-a')
		</script>


</body>
</html>